<template>
  <el-dialog
    append-to-body
    custom-class="orderDistributionList"
    width="40%"
    top="11%"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible.sync="dialogVisible"
    :title="Title"
    :v-loading="loading"
    @close="onClose"
  >
    <el-form
      ref="form"
      :model="systemMsg"
      style="padding-right: 40px"
      label-width="130px"
    >
      <el-form-item label="报警地点" prop="deviceAddress">
        <span class="labelValue">{{
          systemMsg.deviceAddress !== null ? systemMsg.deviceAddress : '-'
        }}</span>
      </el-form-item>
      <el-form-item label="报警时间" prop="alertTime">
        <span class="labelValue">{{
          systemMsg.alertTime | datefmt('YYYY-MM-DD HH:mm:ss')
        }}</span>
      </el-form-item>
      <el-form-item label="报警类型" prop="alarmName">
        <span class="labelValue">{{
          systemMsg.alarmName ? systemMsg.alarmName : '-'
        }}</span>
      </el-form-item>

      <el-form-item label="紧急程度" prop="urgency">
        <el-radio-group v-model="systemMsg.urgency" size="mini">
          <el-radio
            v-for="(item, index1) in urgencyList"
            :key="'value' + index1"
            :label="item.value"
            border
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input
          v-model="systemMsg.remarks"
          type="textarea"
          placeholder="请输入备注"
        ></el-input>
      </el-form-item>
    </el-form>

    <el-form
      ref="userForm"
      :model="UserForm"
      :rules="userRules"
      style="padding-right: 40px"
      label-width="130px"
    >
      <el-form-item label="人员选择" prop="selected">
        <el-select
          v-model="UserForm.selected"
          multiple
          filterable
          clearable
          placeholder="请选择人员"
          style="width: 100%"
          @change="change($event)"
        >
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.username"
            :value="item.userId"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="warning" plain :loading="loading" @click="onClose">{{
        $t('common.cancel')
      }}</el-button>
      <el-button
        type="primary"
        plain
        :loading="loading"
        @click="handleSubmit"
        >{{ $t('common.confirm') }}</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import systemManageApi from '@/api/system-manage'
import warningManageApi from '@/api/warning-manage'
import moment from 'moment'
import { mapState } from 'vuex'
moment.locale('zh-cn')
export default {
  props: {
    systemMsg: {
      type: Object,
      default: null,
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    const test = (rule, value, callback) => {
      const that = this
      if (
        that.UserForm.selected.length === 0 ||
        that.UserForm.selected.length === ''
      ) {
        this.$message.error('请选择至少一个人')
        return false
      } else {
        callback()
        // 要执行的代码
      }
    }
    return {
      moment: moment,
      loading: false,
      // visible: false,
      queryParams: {
        status: 1,
      },
      pagination: {
        pageSizeOptions: [10, 20, 30, 40, 100],
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },

      UserForm: { selected: [] },
      // systemMsg: {
      //   id: '',
      //   alarmName: '',
      //   deviceAction: '',
      //   deviceAddress: '',
      //   alertTime: '',
      //   urgency: 1,
      //   remarks: ''
      // },
      radioList: [
        {
          label: '实际报警',
          value: 1,
        },
        {
          label: '误报报警',
          value: 2,
        },
        {
          label: '隔离报警',
          value: 3,
        },
      ],
      urgencyList: [
        {
          label: '较低',
          value: 0,
        },
        {
          label: '普通',
          value: 1,
        },
        {
          label: '紧急',
          value: 2,
        },
        {
          label: '非常紧急',
          value: 3,
        },
      ],
      userList: [],
      select: [],

      rules: {
        // urgency: [{ required: true, message: '请选择紧急程度', trigger: 'change' }]
      },
      userRules: {
        selected: [
          {
            validator: test,
          },
        ],
      },
    }
  },
  computed: {
    Title() {
      return '工单派发'
    },
    ...mapState({
      systemMsgList: (state) => state.cim.systemMsgList,
    }),
  },
  // watch: {
  //   visible(val) {
  //     if (!val) {
  //       this.$refs['form'].resetFields()
  //     }
  //   }
  // },
  mounted() {
    this.getUser()
  },
  methods: {
    onClose() {
      this.loading = false
      // this.systemMsg = {}
      // this.dialogVisible = false
      this.$emit('close')
    },
    onSuccess() {
      // this.dialogVisible = false
      this.loading = false
      this.$emit('success')
    },
    change(e) {
      this.select = this.userList.filter((item) =>
        e.some((ele) => ele === item.userId)
      )
    },
    // reset() {
    //   this.loading = false
    // },

    // init(row) {
    //   const res = await this.$get('console/api/v1/alarm-job/alarm-base-infos', {
    //     alertId: row.id
    //   })
    //   const [item] = res.data.data
    //   this.$nextTick(() => {
    //     Object.keys(this.systemMsg).forEach((key) => {
    //       this.systemMsg[key] = row[key]
    //     })
    //     this.systemMsg.remarks = item.remarks || ''
    //     this.systemMsg.urgency = item.urgency || 1
    //     this.UserForm.selected = item.userIds || []
    //     this.systemMsg.alertTime = this.moment(this.systemMsg.alertTime).format('YYYY-MM-DD HH:mm:ss')
    //     console.log('row :>> ', this.systemMsg)
    //     this.getUser()
    //   })
    // },
    getUser() {
      systemManageApi
        .getUserNormal({})
        .then((data) => {
          this.userList = data.data.data.rows
        })
        .catch((e) => {
          this.$message.error('获取数据失败，请联系管理员')
        })
    },
    // 派发
    postUser(alarmJobId) {
      const list = []
      // let res1
      // let message
      for (const i in this.select) {
        const obj = {}
        obj.userId = this.select[i].userId
        obj.userName = this.select[i].username
        obj.jobId = alarmJobId || ''
        if (obj.userId) {
          list.push(obj)
        }
      }
      // const params = this.$util.deepClone(list)
      try {
        warningManageApi.jobDistribute(list).then((e) => {
          console.log('派发成功')
        })
      } catch (e) {
        this.loading = false
      }

      // message = '派发成功'
      // const arr = this.systemMsgList.filter((el) => el.equipmentCollect && el.equipmentCollect.id !== alarmJobId)
      // this.$store.commit('cim/resetMsg', arr)
      // this.$store.commit('cim/setListenupdate')
      this.$message.success('派发成功')

      this.loading = false
      this.onSuccess()
    },
    handleSubmit() {
      // console.log('this.systemMsgList :>> ', this.systemMsgList)
      this.loading = true

      if (this.UserForm.selected.length === 0) {
        this.$message.error('请选择报警处理人')
        this.loading = false
        return false
      }
      if (this.systemMsg.urgency == 0) {
      } else {
        if (!this.systemMsg.urgency || this.systemMsg.urgency == '') {
          this.$message.error('请选择紧急程度')
          this.loading = false
          return false
        }
      }
      try {
        const data = {
          alertId: this.systemMsg.id,
          alarmLocation: this.systemMsg.deviceAddress,
          // alarmOccurTime: moment(this.systemMsg.alertTime).format(
          //   'YYYY-MM-DD HH:mm:ss'
          // ),
          urgency: this.systemMsg.urgency,
          remarks: this.systemMsg.remarks,
          alarmType: 1,
        }
        warningManageApi.create(data).then((data) => {
          this.postUser(data.data.data.alarmJobId)
        })
        this.$message.success('生成工单成功')
      } catch (error) {
        this.loading = false
        console.error(error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
/deep/.el-form-item {
  margin-bottom: 12px;
}
// /deep/.orderDistributionList {
//   background-image: url("~@/assets/popup-bg.png");
//   background-size: 100% 100%;
//   background-color: transparent;

//   .el-dialog__header {
//     border-bottom: none;

//     .el-dialog__title {
//       color: #81e8fe;
//       position: absolute;
//       left: 30px;
//       top: 30px;
//     }

//     .el-dialog__headerbtn {
//       background: none;
//       background-image: url("~@/assets/exit.png");
//       background-size: 100% 100%;
//       width: 46px;
//       height: 46px;
//       top: 22px;
//       right: 32px;
//     }
//   }
//   .el-dialog__body {
//     padding: 40px;
//   }
// }
// /deep/.el-dialog__footer {
//   padding-top: 0;
//   padding-bottom: 50px;
//   /deep/.dialog-footer {
//     .buttonBox {
//       margin-right: 30px;
//     }
//     .el-button {
//       text-align: center;
//       background: rgba(0, 185, 255, 0.3);
//       border: 1px solid #11b3ff;
//       border-radius: 2px;
//       color: #ffffff;
//       cursor: pointer;
//     }
//     .el-button:hover {
//       background: #11b3ff;
//     }
//   }
// }
// /deep/.el-dialog__header {
//   .el-dialog__title {
//     color: #ffffff;
//   }
// }

// /deep/.el-input-group__append,
// /deep/.el-input-group__prepend {
//   color: #00b1d6;
//   background: rgba(0, 177, 214, 0.18);
//   border: 1px solid rgba(0, 177, 214, 1);
// }

// /deep/.el-input__inner,
// /deep/.el-textarea__inner {
//   border: 1px solid rgba(0, 177, 214, 1);
//   background: rgba(0, 177, 214, 0.18);
//   color: #fff;
// }

// /deep/.el-form-item__label {
//   color: #fff;
// }
// /deep/.el-radio__label {
//   color: #fff;
// }
// .labelValue {
//   color: #fff;
// }
</style>
